<template>
  <div>
    <el-row :gutter="50">
      <el-form ref="OwnerForm" :model="OwnerData" size="mini" label-width="200px" label-position="left">
        <div>
          <el-col :span="20">
            <el-form-item label="所有权登记：">
              <el-select v-model="owner.typeId" placeholder="请选择" :style="{ width: '100%' }" class="select_left"
                @change="selectFile">
                <el-option v-for="item in typeList" :key="item.typeId" :label="item.typeName"
                  :value="item.typeId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </div>
        <el-col :span="5">
          <el-form-item label="所有权登记必要文件：">
            <el-checkbox-group v-model="auditFiles" size="small" @change="auditFile">
              <el-checkbox v-for="item in fileList" :key="item.key">
                {{ item }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-row type="flex" justify="start" align="top">
            <el-col :span="9">
              <el-form-item label-width="78px" label="申请人：" prop="applicant">
                <el-input v-model="OwnerData.applicant" placeholder="请输入姓名" clearable :style="{ width: '100%' }"
                  class="name">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item label-width="170px" label="申请人身份证件号码：" prop="applicantId">
                <el-input v-model="OwnerData.applicantId" placeholder="请输入申请人身份证件号码" clearable
                  :style="{ width: '100%' }"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row type="flex" justify="start" align="top">
            <el-col :span="9">
              <el-form-item label-width="78px" label="代理人：" prop="agent">
                <el-input v-model="OwnerData.agent" placeholder="请输入姓名" clearable :style="{ width: '100%' }"
                  class="name">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="15">
              <el-form-item label-width="170px" label="申请人身份证件号码：" prop="agentId">
                <el-input v-model="OwnerData.agentId" placeholder="请输入申请人身份证件号码" clearable
                  :style="{ width: '100%' }"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row type="flex" justify="center" align="top">
            <el-col :span="6">
              <el-form-item label-width="0">
                <el-button type="primary" size="mini" @click="submitForm"> 受理 </el-button>
              </el-form-item>
            </el-col>
            <el-col :span="1">
              <el-form-item label-width="0">
                <el-button type="primary" size="mini" @click="resetForm"> 取消 </el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
export default {
  components: {},
  props: [],
  data() {
    return {
      OwnerData: {
        applicant: "",
        applicantId: "",
        agent: "",
        agentId: "",
      },
      auditFiles: [],
      value1: '',
      typeList: [],
      fileList: {},
      owner:{
        typeId: '',
        proposerId: '',
        commonerId: '',
        directoryId: '',
      }
    }
  },
  computed: {},
  watch: {},
  created() { },
  methods: {
    submitForm() {
      if (this.OwnerData.applicant == '') {
        this.$message.error("请注意，申请人不能为空");
      } else if (this.OwnerData.applicantId == '') {
        this.$message.error("请注意，申请人身份证号不能为空");
      } else {
        this.$confirm('确认受理业务', '确认信息', {
          distinguishCancelAndClose: true,
          confirmButtonText: '受理',
          cancelButtonText: '放弃受理'
        })
          .then(() => {
            this.$message({
              type: 'info',
              message: '受理成功'
            });
            this.insertOwner();
            this.$router.push('/Datas');
          })
          .catch(action => {
            this.$message({
              type: 'info',
              message: action === 'cancel'
                ? '放弃受理'
                : '放弃受理'
            })
          });
      }
    },
    resetForm() {
      this.$refs['OwnerForm'].resetFields()
    },
    selectType() {
      this.$axios.post("/register-serv/Ownership/").then((res) => {
        this.typeList = res.data.data;
      });
    },
    selectFile(val) {
      this.value1 = val;
      this.$axios.post("/register-serv/Ownership/selectFile/" + this.value1).then((res) => {
        this.fileList = res.data.data;
      });
    },
    // 生成一个申请人表
    insertProposer() {
      this.$axios.post("/register-serv/Proposers/add" + this.OwnerData).then((res) => {
        this.owner.proposerId = res.data.data.proposerId;
      });
    },
    // 生成一个共有人表
    insertCommoner() {
      this.$axios.post("/register-serv/Commoners/add").then((res) => {
        this.owner.commonerId = res.data.data.commonerId;
      });
    },
    // 生成一个登记簿表
    insertDirectory() {
      this.$axios.post("/register-serv/directory/add").then((res) => {
        this.owner.directoryId = res.data.data.directoryId;
      });
    },
    // 生成一个所有权登记表
    insertOwner() {
      this.$axios.post("/register-serv/Ownership/insert",this.owner);
    },
  },
  mounted() {
    this.selectType();
  },
}

</script>
<style>
.select_left {
  margin-left: -425px;
}

.el-input__inner {
  width: 50%;
}

.name {
  margin-left: 17px;
}
</style>